<template>
    <div class="home-container">
        <a-layout theme="light">
            <a-layout-header>
                <my-header></my-header>
            </a-layout-header>
            <a-layout theme="light" style="margin-top: 75px">
                <a-layout-sider theme="light" style="height: unset">
                    <my-slider></my-slider>
                </a-layout-sider>
                <a-layout-content>
                    <div class="home-view">
                        <div class="my-content">
                            <my-content></my-content>
                        </div>
                        <div class="my-slider-right">
                            <my-slider-right></my-slider-right>
                        </div>
                    </div>
                </a-layout-content>
            </a-layout>
            <a-layout-footer>
                <my-footer></my-footer>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>

    import MyFooter from "@/views/home/components/footer/index";
    import MySlider from "@/views/home/components/slider/index";
    import MyHeader from "@/views/home/components/header/index";
    import MyContent from "@/views/home/components/content/index";
    import MySliderRight from "@/views/home/components/silder-right/index";

    export default {
        name: "index",
        components: {
            MySliderRight,
            MyContent,
            MyHeader,
            MySlider,
            MyFooter
        }
    }
</script>
<style>
    .home-container .ant-layout.ant-layout-has-sider {
        width: 1200px;
        margin: 0 auto;
        margin-top: 10px;
    }
    .home-container .ant-layout-sider {
        flex: unset!important;
        width: 200px!important;
        min-width: unset!important;
        max-width: unset!important;
    }
</style>
<style scoped>
    .home-container {
        margin: 0 auto;
        background: #F0F2F5;
    }
    .home-container .home-view {
        width: calc(100% - 10px);
        margin-left: 10px;
        display: flex;
    }
    .home-container .my-content{
        width: 760px;
    }
    .home-container .my-slider-right{
        flex: 1;
        margin-left: 10px;
    }
</style>
